<template>
    <div class="order">
        <VHeader title="认领任务"/>
        <van-list
                v-if="list.length > 0"
                v-model="loading"
                :finished="finished"
                @load="getList"
        >
            <div class="card" v-for="item in list" :key="item.id" @click="$router.push('/myRecord/'+item.id)">
                <div class="flex flex-align-center">
                    <div class="left check-status">
                        <span :class="'status- status-'+item.status">{{item.status|myOrderStatus}}</span>
                    </div>
                    <div class="content-title" v-text="item.title"></div>
                </div>
                <div class="flex">
                    <div class="left muted">描述内容：</div>
                    <div class="content-content">{{item.contents}}</div>
                </div>
                <div class="flex">
                    <div class="left muted">联系人：</div>
                    <div class="content-content">{{item.contactName}}({{item.contactMobile}})</div>
                </div>
                <div class="flex">
                    <div class="left" style="margin-right: 90px"><span style="display:inline-block;min-width: 80px;" class="muted">任务积分：</span><span class="orange">{{item.integral}}</span></div>
                    <div><span class="muted">发布时间：</span>{{item.createTime.split(' ')[0]}}</div>
                </div>
            </div>
        </van-list>
        <div v-else class="flex flex-center flex-align-center no-more">
            <div>
                <img src="../../../static/img/no_data.png" width="150" />
                <p style="text-align: center">没有更多数据</p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                list: [],
                selectedCode: [],
                selectedName: [],
                selectedIndex: 0,
                keyword: '',
                page: 1,
                loading: false,
                finished: false,
            }
        },
        methods: {
            async getList() {
                this.loading = true;
                try {
                    let list = await this.$http({
                        page: this.page++,
                        method: 'api.diandan.getRecord',
                        teamName: this.keyword,
                    })
                    if(list.data.list.length <= 0){
                        this.finished = true;
                    }
                    this.list = this.list.concat(list.data.list);
                }catch (e) {
                
                }
                this.loading = false;
            }
        },
        mounted() {
            this.getList()
        }
    }
</script>
<style lang="scss" scoped>
    .title {
        padding: 0.3rem 0;
        font-size: 150%;
        color: #F65D5D;
    }
    .no-more {
        text-align:center;
        margin-top: 50px;
    }
    .card {
        font-size: 14px;
        margin: 10px;
        padding: 15px 10px;
        background-color: #EFEFEF;
        border-radius: 5px;
        > .flex {
            line-height: 24px;
            .left {
                min-width: 80px;
            }
        }
            .orange {
                display: inline-block;
                padding: 0 1px;
                color: #EE6F2D;
            }
            .content-title {
                font-size: 16px;
            }
            .content-content{
                max-height: 80px;
                overflow:hidden;
            }
        .check-status {
            .pass {
                border:1px solid #0A930A;
                color: #0A930A;
            }
            .wait {
                border:1px solid #378EEF;
                color: #378EEF;
            }
        }
    }
    .muted {
        color: #7d7e80;
    }
    .status- {
        min-width: 40px;
        border-radius: .16rem;
        color: #fff;
        text-align: center;
        padding: 2px .2rem 0px;
        margin-right: 0.32rem;
    }
    .status-0{
        background-color: #b5bbbe;
    }
    .status-1{
        background-color: #FFA518;
    }
    .status-2{
        background-color: #378EEF;
    }
    .status-3{
        border: 1px solid #0A930A;
        background-color: #0A930A;
    }
    .status-4{
        background-color: #F65D5D;
    }
</style>